<template>
	<view style="padding-bottom: 120rpx;">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="item" style="padding: 20rpx;" v-for="(item, index) in list" :key="item.id">
				<view class="text-line">
					<text class="text-name">加油日期:</text>
					<text class="text-value">{{ item.refuelingDate | filterNull }}</text>
				</view>

				<view class="text-line">
					<text class="text-name">使用油卡</text>
					<text class="text-value">{{ item.cardNo | filterNull }}</text>
				</view>

				<view class="text-line">
					<text class="text-name">加油金额:</text>
					<text class="text-value">¥{{ item.refuelingAmount | filterNull }}</text>
				</view>

				<view class="text-line">
					<text class="text-name">加油前公里数:</text>
					<text class="text-value">{{ item.kilometers | filterNull }}公里</text>
				</view>
				<view class="text-line">
					<text class="text-name">加油前油量:</text>
					<text class="text-value">{{ item.oilVolume | filterNull }}</text>
				</view>

				<view class="text-line">
					<text class="text-name">加油人:</text>
					<text class="text-value">{{ item.oiler | filterNull }}</text>
				</view>
				<view v-if="roleType == 1">
					<u-line color="#efefef" dashed></u-line>
					<view style="display: flex;justify-content: flex-end;"><text class="btn-detail" @click="edit(item)">编辑</text></view>
				</view>
			</view>
		</mescroll-body>
		
		<view v-if="roleType == 1" class="bottom">
			<text @click="add()">新增加油记录</text>
		</view>
	</view>
</template>

<script>
import * as refuelApi from '@/api/refuel-api.js';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			carId: '',
			carNo:'',
			list: []
		};
	},
	computed: {
		roleType() {
			return this.$store.state.user.roleType;
		}
	},
	onLoad(op) {
		uni.$on('refreshCarRefuelList', ()=>{
			this.mescroll.triggerDownScroll();
		})
		this.carId = op.carId;
		this.carNo = op.carNo;
	},
	methods: {
		upCallback(page) {
			var params = {
				carId: this.carId,
				pageNum: page.num,
				pageSize: page.size
			};
			refuelApi
				.refuelList(this.toParams(params))
				.then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		// 编辑
		edit(item) {
			uni.navigateTo({
				url:'./addRefuelRecord?type=1'+'&id=' + item.id
			})
		},
		// 新增
		add() {
			uni.navigateTo({
				url:'./addRefuelRecord?type=0'+'&carId=' + this.carId + '&carNo=' + this.carNo
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.btn-detail {
		
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
	}
	.bottom {
			position: fixed;
			width: 100%;
			height: 100rpx;
			font-size: 32rpx;
			bottom: 0;
			z-index: 999;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			text {
				width: 98%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				background-color: $blue15;
				color: white;
				text-align: center;
				font-size: 30rpx;
			}
		}
</style>
